<template>
  <div class="feedbackManagement">
    <h3>客服中心</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入内容" v-model="search2">
          <template slot="prepend">内容</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>状态</label>
        <el-select v-model="search3" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户邀请码" v-model="search4">
          <template slot="prepend">用户邀请码</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户id" v-model="search5">
          <template slot="prepend">用户id</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
      </div>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.nick"
          label="用户名"
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.code"
          label="用户邀请码"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user_id"
          label="用户Id"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.parent_id"
          label="上级Id"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.mobile"
          label="手机号"
          width="110"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.channel_id"
          label="渠道号"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.device_text"
          label="设备"
          width="60"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="user.version"
          label="应用版本"
          width="80"
        ></el-table-column>

        <el-table-column header-align="center" align="center" prop="user.ip" label="ip" width="120"></el-table-column>
        <el-table-column header-align="center" align="center" prop="area" label="地区" width="80"></el-table-column>
        <el-table-column header-align="center" align="center" label="最新消息预览">
          <template slot-scope="scope">
            <p v-if="scope.row.type==1">{{scope.row.content}}</p>
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.content"
              :preview-src-list="scope.row.imgpreviewList"
              fit="cover"
              v-if="scope.row.type==2"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="status_text"
          label="状态"
          width="70"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="创建时间"
          width="100"
          sortable
        ></el-table-column>
        <!-- <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="回复时间"
          width="150"
          sortable
        ></el-table-column>-->
        <el-table-column header-align="center" align="center" label="操作" fixed="right" width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleView(scope.$index, scope.row)"
              v-if="permissions_obj.id_24||permissions_obj.id_all"
            >会话框</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleMaker(scope.$index, scope.row)"
              v-if="(permissions_obj.id_26||permissions_obj.id_all)&&scope.row.status==0"
            >标记为已回复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10,30,50,100]"
        :page-size="pageSize"
        layout="total, prev, pager, next,sizes,jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
    <!-- 查看详情 -->
    <el-dialog title="会话框" :visible.sync="centerDialogVisible" width="40%" center>
      <div class="detail">
        <div class="title">基本信息</div>
        <div class="detailBox">
          <div class="detailItem">
            <font>用户名：</font>
            <span>{{selectUser.nick}}</span>
          </div>
          <div class="detailItem">
            <font>用户ID：</font>
            <span>{{selectUser.code}}</span>
          </div>
          <div class="detailItem">
            <font>手机号码：</font>
            <span>{{selectUser.mobile}}</span>
          </div>
          <div class="detailItem">
            <font>设备类型：</font>
            <span>{{selectUser.device_text}}</span>
          </div>
          <div class="detailItem">
            <font>IP：</font>
            <span>{{selectUser.ip}}</span>
          </div>
        </div>
      </div>
      <div class="reply">
        <div class="replyContent" id="scrolldIV">
          <div class="dialogItem" v-for="(item,index) in dialogData.data" :key="index">
            <!-- <div class="date">2020-02-26</div> -->
            <div class="userDialog" v-if="item.rid==0">
              <!-- <div>用户</div> -->
              <div class="dialogContent">
                <div class="text" v-if="item.type==1">{{item.content}}</div>
                <div class="pic" v-if="item.type==2">
                  <!-- <img :src="item.content" alt /> -->
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.content"
                    :preview-src-list="item.contentImgPreviewList"
                    fit="contain"
                  ></el-image>
                </div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
            <div class="serviceDialog" v-else>
              <!-- <div>客服</div> -->
              <div class="dialogContent">
                <div class="text" v-if="item.type==1">{{item.content}}</div>
                <div class="pic" v-if="item.type==2">
                  <!-- <img :src="item.content" alt /> -->
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.content"
                    :preview-src-list="item.contentImgPreviewList"
                    fit="contain"
                  ></el-image>
                </div>
              </div>
              <div class="time">{{item.time}}</div>
            </div>
          </div>
        </div>
        <div class="dialogBtn">
          <el-upload
            class="upload-demo"
            :action="imgUploadParth"
            :show-file-list="false"
            :on-success="imgUploadSuccess"
            :on-error="imgUploadFailure"
          >
            <el-button type="primary">添加图片</el-button>
          </el-upload>
          <el-input placeholder="请输入内容" v-model="inputText" clearable></el-input>
          <el-button
            type="primary"
            @click="submitReply"
            v-if="permissions_obj.id_25||permissions_obj.id_all"
          >回复</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "js-md5";
export default {
  name: "feedbackManagement",
  data() {
    return {
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "1",
          label: "已回复"
        },
        {
          value: "0",
          label: "未回复"
        }
      ],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      //表格数据
      tableData: [],
      currentPage1: 1,
      pageSize: 10,
      totalSize: 0,
      //查看详情弹窗
      centerDialogVisible: false,
      //回复内容
      inputText: "",
      initData: {},
      //操作的用户id
      selectId: "",
      selectUser: "",
      //对话框内容
      dialogData: {},
      currentPage2: 1,
      pageSize2: 100,
      //图片上传成功返回地址
      uploadImg: "",
      //图片上传接口地址
      imgUploadParth: "",
      // 权限管理
      permissions: [],
      permissions_obj: {}
    };
  },
  created() {
    //权限判断
    this.permissions = this.$store.state.permissions;
    let oneOff = false;
    this.permissions.forEach((item, index) => {
      if (item == -1) {
        oneOff = true;
      } else {
        this.permissions_obj["id_" + item] = item;
      }
    });
    if (oneOff) {
      this.permissions_obj.id_all = true;
    } else {
      this.permissions_obj.id_all = false;
    }
  },
  mounted() {
    this.getFileUploadParth();
    this.getDataList();
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      this.getDataList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    //显示查看弹窗
    handleView(index, row) {
      this.centerDialogVisible = true;
      this.selectId = row.uid;
      this.selectUser = row.user;
      this.getDialogList(this.selectId);
    },
    //回复
    async submitReply() {
      if (!this.inputText) {
        return;
      }
      let parames = {
        handshake: "",
        data: {
          uid: this.selectId,
          type: 1,
          content: this.inputText
        }
      };
      let res = await this.$axios.post(
        this.$api.feedbackReply,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.inputText = "";
        this.getDialogList(this.selectId);
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //滚动条滚动到最底部
    scrollToBottom() {
      this.$nextTick(() => {
        // let top =
        //   document.documentElement.scrollTop ||
        //   document.body.scrollTop ||
        //   window.pageYOffset;
        var div = document.getElementById("scrolldIV");
        div.scrollTop = div.scrollHeight;
        // window.scrollTo(top, div.scrollTop);
        this.$forceUpdate();
      });
    },
    //标记为已回复
    handleMaker(index, row) {
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.makeReply(row.uid);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    //获取初始化反馈列表
    async getDataList() {
      let parames = {
        handshake: "",
        data: {
          page: this.currentPage1,
          page_size: this.pageSize,
          name: this.search1,
          content: this.search2,
          status: this.search3,
          code: this.search4,
          user_id: this.search5
        }
      };
      let res = await this.$axios.post(
        this.$api.feedbackList,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.initData = res.data;
        this.initData.data.forEach((item, index) => {
          if (item.status == 0) {
            item.status_text = "未回复";
          } else if (item.status == 1) {
            item.status_text = "已回复";
          }
          if (item.user.device_type == "I") {
            item.user.device_text = "苹果";
          } else if (item.user.device_type == "A") {
            item.user.device_text = "安卓";
          } else if (item.user.device_type == "H") {
            item.user.device_text = "来源h5";
          }
          let arr = [];
          arr.push(item.content);
          item.imgpreviewList = arr;
        });
        this.totalSize = this.initData.total;
        this.tableData = this.initData.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //获取对话框列表
    async getDialogList(id) {
      let parames = {
        handshake: "",
        data: {
          page: this.currentPage2,
          page_size: this.pageSize2,
          code: id
        }
      };
      let res = await this.$axios.post(
        this.$api.feedbackTalkList,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.dialogData = res.data;
        this.dialogData.data.forEach((item, index) => {
          let arr = [];
          arr.push(item.content);
          item.contentImgPreviewList = arr;
        });
        this.scrollToBottom();
        // this.totalSize = this.initData.total;
        // this.tableData = this.initData.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //标记为已回复接口
    async makeReply(id) {
      let parames = {
        handshake: "",
        data: {
          code: id
        }
      };
      let res = await this.$axios.post(
        this.$api.feedbackStatus,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getDataList();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //搜索
    searchMethod() {
      this.currentPage1 = 1;
      this.getDataList();
    },
    //获取文件上传地址
    async getFileUploadParth() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.uploadGet_domain,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        let timestamp = parseInt(new Date().getTime() / 1000);
        let platform = "P";
        let secret = "Z6Kbz8hpT9VtGmcu";
        let sign = md5(platform + timestamp + secret).toUpperCase();
        this.imgUploadParth =
          res.data.url +
          "?dir=feedback&platform=P&timestamp=" +
          timestamp +
          "&sign=" +
          sign;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //图片上传成功
    imgUploadSuccess(response, file, fileList) {
      this.uploadImg = response.result.file_path;
      this.submitReplyImg();
    },
    imgUploadFailure(err, file, fileList) {
      this.$message({
        message: "添加图片失败",
        type: "warning"
      });
    },
    //回复图片
    async submitReplyImg() {
      if (!this.uploadImg) {
        return;
      }
      let parames = {
        handshake: "",
        data: {
          uid: this.selectId,
          type: 2,
          content: this.uploadImg
        }
      };
      let res = await this.$axios.post(
        this.$api.feedbackReply,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.uploadImg = "";
        this.getDialogList(this.selectId);
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
  }
};
</script>
<style scoped>
h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.detail .title {
  margin-bottom: 0.1rem;
  color: #05a4bf;
}
.detail .detailBox {
  display: flex;
  flex-wrap: wrap;
}
.detail .detailItem {
  width: 50%;
  margin-bottom: 0.1rem;
}

.reply {
  width: 100%;
  margin-top: 0.2rem;
  border: 1px solid rgb(117, 116, 116);
  height: 5rem;
  position: relative;
}
.reply .dialogBtn {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.reply .el-input {
  width: 100%;
}
.replyContent {
  padding: 0.1rem 0.1rem 0.5rem;
  width: 100%;
}
.reply .replyContent {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.replyContent .date {
  width: 100%;
  text-align: center;
  margin-bottom: 0.1rem;
}
.dialogContent {
  max-width: 80%;

  display: flex;
}
.dialogContent .text {
  background: #e3f0f7;
  padding: 0.1rem;
  border-radius: 8px;
}
.dialogContent .pic {
  width: 100%;
}
.dialogContent .pic img {
  width: 100%;
}
.dialogItem {
  margin-bottom: 0.2rem;
}
.dialogItem .time {
  margin-top: 0.05rem;
}
.serviceDialog {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
</style>